<template>
    <div>
<!--      基础过渡动画-->
<!--      <BaseTransition></BaseTransition>-->
<!--      keyframes演示-->
<!--      <Keyframes></Keyframes>-->
<!--      过渡动画和animate同时使用-->
<!--      <base-animate></base-animate>-->
    <velocity></velocity>
      <!--     多个元素/组件过渡 -->
<!--      <transition name="fade"-->
<!--                  mode="out-in"-->
<!--      >-->
<!--&lt;!&ndash;        mode="in-out" 先出现再隐藏&ndash;&gt;-->
<!--        <div v-if="show" key="hello">hello world</div>-->
<!--        <div v-else  key="bye">Bye world</div>-->
<!--      </transition>-->
<!--        <button @click="handleClick">切换</button>-->

<!--      <transition name="fade"-->
<!--                  mode="out-in"-->
<!--      >-->
<!--&lt;!&ndash;        动态组件&ndash;&gt;-->
<!--        <component :is="type"></component>-->
<!--      </transition>-->
<!--      <button @click="handleComp">组件动画</button>-->

<!--&lt;!&ndash;      列表过渡&ndash;&gt;-->
<!--      <transition-group>-->
<!--        <div v-for="(item) in list" :key="item.id">-->
<!--          {{item.context}}-->
<!--        </div>-->
<!--      </transition-group>-->
<!--      <button @click="handleBtnClick">列表过渡</button>-->

<!--&lt;!&ndash;      动画封装&ndash;&gt;-->
<!--      <fade :show="show">-->
<!--        <h1 >hello world</h1>-->
<!--      </fade>-->
<!--      <button @click="handleFade">动画封装</button>-->
    </div>

</template>

<script>
import BaseTransition from './baseTransition'
import Keyframes from './keyframes'
import baseAnimate from './baseAnimate'
import velocity from './velocity'
export default {
  name: 'animate-test',
  data () {
    return {
      show: true,
      type: 'child',
      list: [],
      count: 0
    }
  },
  components: {
    BaseTransition,
    Keyframes,
    baseAnimate,
    velocity,
    'child': {
      template: '<div>child</div>'
    },
    'child-one': {
      template: '<div>child-one</div>'
    },
    'fade': {
      // 推荐将动画封装到methods里,而不是style里
      template: `<transition name="fengzhuang" @before-enter="handleBeforeEnter"
                              @enter="handleEnter"
        ><slot v-if="show"></slot></transition>`,
      props: ['show'],
      methods: {
        handleBeforeEnter (el) {
          el.style.color = 'red'
        },
        handleEnter (el, done) {
          setTimeout(() => {
            el.style.color = 'green'
            done()
          }, 2000)
        }
      }
    }
  },
  methods: {
    handleClick () {
      this.show = !this.show
    },
    handleComp () {
      this.type = this.type === 'child' ? 'child-one' : 'child'
    },
    handleBtnClick () {
      this.list.push({
        id: this.count++,
        context: 'hello world'
      })
    },
    handleFade () {
      this.show = !this.show
    }
  }
}
</script>

<style scoped>
  .fade-enter,.fade-leave-to {
    opacity: 0;
  }
  .fade-enter-active {
    transform-origin: left center;
    transition: opacity 1s;
  }
  .fade-leave-active {
    transform-origin: left center;
    transition: opacity 1s;
  }
  .v-enter, .v-leave-to {
    opacity: 0;
  }
  .v-enter-active, .v-leave-active {
    transition: opacity 1s;
  }
</style>
